<template>
  <div>
    <div class="search_form">
			<div>
				<el-input v-model="searchForm.customerName" size="mini" clearable class="others" placeholder="请输入客户名称"></el-input>
				<el-select
					size="mini"
					clearable
					placeholder="请选择客户类型"
					v-model="searchForm.customerType"
					class="others"
					popper-class="selectClass"
				>
					<el-option v-for="(item, index) in custypeList" :key="index" :label="item.label" :value="item.value"></el-option>
				</el-select>
				<el-select
					size="mini"
					clearable
					placeholder="选择审核状态"
					v-model="searchForm.status"
					class="others"
				>
					<el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>

				<el-button class="search_btn" type="primary" icon="el-icon-search" size="mini" @click="searchData">查询</el-button>
				<el-button icon="el-icon-refresh-right" size="mini" @click="resetSearch">重置</el-button>
			</div>
      <div>
        <el-button size="mini" type="primary" icon="el-icon-s-check" v-hasPermi="['metaDataManagement:Customer:updatestatusByid']" @click="showcus">审核</el-button>
      </div>
    </div>
    <!-- 主列表table -->
    <BaseTable :loading="loading" :data="tableData" :columns="columns" :tableHeight="tableHeight" @details="getSelectRow" :pagination="queryall" @size-change="sizeChange" @current-change="pageChange"></BaseTable>
    <!-- 详情 -->
    <el-drawer
      title="审核详情"
      :visible.sync="isShow"
      direction="rtl"
      size="60%">
      <el-collapse v-model="activeNames">
        <el-collapse-item title="客户信息" name="1">
          <el-form  :model="form" ref="basisRulesRef" style="padding:10px 10px;" label-position="top">
            <el-row>
              <el-col :span="8">
                <el-form-item label="客户类型">
                  <el-radio-group v-model="form.customerType" size="mini">
                  <el-radio :label="'1'">国内</el-radio>
                  <el-radio :label="'2'">国外</el-radio>
                  <el-radio :label="'3'">个人</el-radio>
                </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="客户名称">
                  <el-input v-model="form.customerName" size="mini"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="客户简称">
                  <el-input v-model="form.customerShortName" size="mini"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="客户属性">
                  <el-checkbox-group v-model="checkedCus">
                  <el-checkbox
                      v-for="cus in cusTypeList"
                      :label="cus.dictLabel"
                      :key="cus.dictValue"
                    >{{ cus.dictLabel }}</el-checkbox>
                </el-checkbox-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="发票抬头">
                  <el-input v-model="form.invoice" size="mini"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="纳税人识别号">
                  <el-input v-model="form.tin" size="mini"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="开户行">
                  <el-input v-model="form.bank" size="mini"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="银行账号">
                  <el-input v-model="form.bankAccount" size="mini"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="地址">
                  <el-input v-model="form.address" size="mini"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="联系人">
                  <el-input v-model="form.contact" size="mini"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="电话">
                  <el-input v-model="form.contactNumber" size="mini"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="身份证号">
                  <el-input v-model="form.card" size="mini"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="登录账号">
                  <el-input v-model="form.accNo" disabled size="mini"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="企业联系电话" prop="telephoneNumber">
                  <el-input
                    v-model="form.telephoneNumber"
                    maxlength="15"
                    autocomplete="off"
                    size="mini"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="企业地址" prop="contactAddress">
                  <el-input
                    v-model="form.contactAddress"
                    maxlength="15"
                    autocomplete="off"
                    size="mini"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="附件">
                  <Upload @changeFile="changeFile" :fileListEdit="mattachmentInfoList" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-collapse-item>
      </el-collapse>
      <div class="demo-drawer__footer">
        <el-button
          size="small"
          type="primary"
          @click="auditFun"
          :loading="isSaveLoading"
        >{{ isSaveLoading ? '提交中 ...' : '审核' }}</el-button>
      </div>
    </el-drawer>
    <el-dialog
      title="预览"
      :visible.sync="dialogVisible">
      <div>
        <img :src="imgurl" style="width:100%;height:auto"/>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="downLoadFile(fileInfo)">下载</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import BaseTable from '@/components/BaseTable'
import publicapi from '@/api/public/index'
import api from '@/api/Business/customerAudit/index'
import axios from 'axios'
import config from '@/network/config.js'
import Upload from '@/components/upload'
export default {
  components: { BaseTable,Upload },

  data() {
    return {
      searchForm: {
        customerName: '', //
        customerType: '',
        status: ''
      },
      activeNames: ['1','2'],
      custypeList: [
        {
          value: '1',
          label: '国内企业'
        },
        {
          value: '2',
          label: '国外企业'
        },
        {
          value: '3',
          label: '个人'
        }
      ],
      statusList: [
        {
          value: '1',
          label: '未审核'
        },
        {
          value: '2',
          label: '已审核'
        }
      ],
      loading: false,
      queryall: {
        totalNum: 0,
        startpage: 1,
        pagesize: 15
      },
      selectInfo: null, // 选中后行数据
      tableData: [],
      columns: [
        {
          prop: 'customerType',
          label: '客户类型',
          render(h, params) {
            return h('span', {
              props: {
                size: 'mini'
              },
              domProps: {
                innerHTML: params.row.customerType == '1' ? '国内企业' : params.row.customerType == '2' ? '国外企业' : '个人'
              }
            })
          }
        },
        {
          prop: 'customerName',
          label: '客户名称'
        },
        {
          prop: 'customerShortName',
          label: '客户简称'
        },
        {
          prop: 'customerProperty',
          label: '客户属性'
        },
        {
          prop: 'contact',
          label: '联系人名称'
        },
        {
          prop: 'contactNumber',
          label: '联系人电话'
        },
        {
          prop: 'status',
          label: '状态',
          render(h, params) {
            if (params.row.status == '1') {
              return h('el-tag', {
                props: {
                  size: 'mini'
                },
                domProps: {
                  innerHTML: '未审核'
                }
              })
            }
            return h('el-tag', {
              props: {
                size: 'mini',
                type: 'success'
              },
              domProps: {
                innerHTML: '已审核'
              }
            })
          }
        },
        {
          prop: 'remark',
          label: '备注'
        }
      ],
      tableHeight: window.innerHeight - 210,
      isShow: false,
      form: {
        customerType: '',
        customerName: '',
        customerShortName: '',
        invoice: '',
        tin: '',
        bank: '',
        bankAccount: '',
        address: '',
        contactNumber: '',
        contact: '',
        accNo: '',
        accPwd: '',
        userName: '',
        phone: '',
        email: '',
        cardType: '',
        card: '',
        contactAddress: '',
        telephoneNumber: '',
      },
      cusTypeList: [],
      checkedCus: [],
      authorizationList: [], // 文件list
      isSaveLoading: false,
      mattachmentInfoList: [],
      imgurl: '',
      dialogVisible: false
    }
  },
  activated() {
    var menuArr = []
    var menuId = ''
    if (localStorage.getItem('menuArr')) {
      menuArr = JSON.parse(localStorage.getItem('menuArr'))
    }
    menuArr.map(item => {
      item.children.map(v => {
        if (window.location.href.includes(v.url)) {
          menuId = v.id
        }
      })
    })

    if (menuId) {
      var menuData = []
      this.$http.get(`/wfpms-master-service/api/external/sysmenubtn/listresourcebtnbyid?menuId=${menuId}`, { timeout: 30000 })
        .then(res => {
          res.data.data.map(item => {
            menuData.push(item.RESOURCENAME)
          })
        }).catch((error) => {})
    }
    if (this.$store.state.app.searchResouce == 'menu') {
      this.queryAll = {
        companyName: '',
        startpage: 1,
        pagesize: 10
      }
    }
    this.getdictdata()
    // this.searchData()
  },
  methods: {
    // 查询主列表数据
    searchData() {
      this.loading = true;
      const params = {
        pagesize: this.queryall.pagesize,
        startpage: this.queryall.startpage,
        customerName: this.searchForm.customerName,
        customerType: this.searchForm.customerType,
        status: this.searchForm.status
      }
      api.gettabledata(params).then(res => {
        this.loading = false
        this.tableData = res.data.data.pages
        this.queryall.totalNum = res.data.data.totalNum;
        this.queryall.startpage = res.data.data.pageNum;
        this.selectInfo = null
      })
    },
    // 重置查询form
    resetSearch() {
      this.searchForm = {
        customerName: '',
        customerType: '',
        status: ''
      }
    },
    // 分页查询
    sizeChange(val) {
      this.queryall.pagesize = val;
      this.searchData();
    },
    // 分页查询
    pageChange(val) {
      this.queryall.startpage = val;
      this.searchData();
    },
    // 选中行数据
    getSelectRow(row) {
      console.log(row)
      this.selectInfo = row
    },
    // 打开审核抽屉
    showcus() {
      if (this.selectInfo == null) {
        return this.$message.info('请选择一条数据')
      }
      api.queryApprovalById(this.selectInfo.id).then(res => {
        let data = JSON.parse(JSON.stringify(res.data.data))
        let params = JSON.parse(JSON.stringify(data.user))
        let param = JSON.parse(JSON.stringify(data.sysAccount))
        this.form = Object.assign(data,params,param)
        this.mattachmentInfoList = []
        if (data.mattachmentInfoList && data.mattachmentInfoList.length > 0) {
          data.mattachmentInfoList.forEach(v => {
            this.mattachmentInfoList.push({ id: v.fileId, name: v.fileName,fileId: v.fileId,
              fileName: v.fileName })
          })
        }
        console.log(this.mattachmentInfoList)
        this.checkedCus = this.form.customerProperty.split(',')
        this.form.customerType = this.form.customerType + ''
        this.isShow = true;
      })
      const para = JSON.parse(JSON.stringify(this.selectInfo))
      const params = JSON.parse(JSON.stringify(this.selectInfo.user))
      const param = JSON.parse(JSON.stringify(this.selectInfo.sysAccount))
      
    },
    // 获取字典数据
    getdictdata() {
      publicapi.getDictData('CUSTOMER_PROPERTY').then(res => {
        this.cusTypeList = res.data.data.CUSTOMER_PROPERTY
        console.log(this.cusTypeList)
      })
    },
    // 文件预览
    handlePreview(file) {
      console.log(file);
      this.fileInfo = file
      if (file.name.indexOf('jpg') != -1 || file.name.indexOf('png') != -1 || file.name.indexOf('jpeg') != -1) {
        axios({
          method: 'get',
          url: `${config.ConfigBaseURL}/wfpms-master-service/api/external/publics/file/down?id=${file.id}`,
          responseType: 'blob',
          params: {
            token: window.sessionStorage.getItem('token')
          }
        }).then(res => {
          const blob = new Blob([res.data], {
            type: 'application/png;charset=utf-8'
          });
          const url = window.URL.createObjectURL(blob);
          this.imgurl = url
          this.dialogVisible = true
        })
      } else {
        this.downLoadFile(file)
      }
    },
    // 文件下载
    downLoadFile(file) {
      axios({
        method: 'get',
        url: `${config.ConfigBaseURL}/wfpms-master-service/api/external/publics/file/down?id=${file.id}`,
        responseType: 'arraybuffer',
        params: {
          token: window.sessionStorage.getItem('token')
        }
      }).then(res => {
        console.log(res)
        const content = res.data
        const blob = new Blob([content]) // 构造一个blob对象来处理数据
        const link = document.createElement('a') // 创建a标签
        link.download = file.name // a标签添加属性
        link.style.display = 'none'
        link.href = URL.createObjectURL(blob, {
          type: `application/pdf`
        })
        document.body.appendChild(link)
        link.click() // 执行下载
        URL.revokeObjectURL(link.href) // 释放url
        document.body.removeChild(link) // 释放标签
      }).catch((error) => {

      })
    },
    // 审核客户信息
    auditFun() {
      api.auditdata(this.selectInfo.id).then(res => {
        this.$message.success(res.data.msg)
        this.isShow = false;
        this.searchData()
      })
    },
    changeFile (val) {

    },
  }
}
</script>
<style scoped lang="less">
@import "../../../assets/searchfrom.less";

/deep/ .el-drawer__header {
  margin-bottom: 0;
  padding: 16px;
  border-bottom: 1px solid gainsboro;
}
/deep/ .el-form-item {
  padding-right: 20px;
}
.titleclass{
  background-color: rgb(235, 231, 231);
  height: 50px;
  width: 103%;
  margin-top: -10px;
  margin-left: -10px;
  line-height:50px;
}
.titleclass2{
  background-color: rgb(235, 231, 231);
  height: 50px;
  width: 103%;
  margin-left: -10px;
  line-height:50px;
}
/deep/ .el-drawer__body {
  overflow-y: auto;
  margin-bottom: 50px;
}
/deep/ .demo-drawer__footer {
  text-align: right;
  padding-right: 1rem;
  border-top: 1px solid #c8cfde;
  background-color: #f5f7fa;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  line-height: 50px;
  z-index: 20;
}
</style>
